<template>
    <div id="background">
        <el-container>
            <el-header style="height:200px">
                <div >
                    <el-row type="flex" style="margin-top:40px">
                        <el-col :xs="3" :sm="3" :md="3" :offset="2">
                            <img v-bind:src="backIcon" style="height:28px" @click="back"/>
                        </el-col>
                     </el-row>
                    <el-row type="flex" justify="center" style="margin-bottom:30px">
                    <el-col :xs="20" :sm="20" :md="20" class="imgCol">
                        <img v-bind:src="titleImg" style="height:40px"/>
                    </el-col>
                    </el-row>
                    <el-row type="flex" style="margin-bottom:80px" justify="center">
                        <el-col :xs="22" class="imgCol">
                            <img v-bind:src="step2Img" style="height:25px"/>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-main>
                <div id="inputHeight">
                     <el-row type="flex" style="margin-bottom:60px">
                        <el-col :xs="2" :sm="2" :md="2" :offset="2" class="imgCol"><img v-bind:src="codeIcon" style="height:20px"/></el-col>
                        <el-col :xs="17" :sm="17" :md="17">
                            <el-input class="forgetInput" id="forgetInput2" v-model="loginForm.password" placeholder="请为账号设置新密码" show-password clearable></el-input>
                        </el-col>
                    </el-row>
                </div>
                <div>
                   <el-row type="flex" justify="center" style="margin-bottom:10px">
                        <el-col :xs="20" :sm="20" :md="20" >
                            <button class="btn"><p class="btnWords" @click="resetPassword">确定</p></button>
                        </el-col>
                    </el-row>
                </div>
            </el-main>
         
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../assets/img/regist/back.png'
import titleImg from '../../assets/img/regist/title.png'
import step2Img from '../../assets/img/regist/2.png'
import codeIcon from '../../assets/icon/login/code.png'
import { Toast} from 'vant';
export default {
    data(){
        return{
              backIcon:backIcon,
            titleImg:titleImg,
            step2Img:step2Img,
            codeIcon:codeIcon,
           // normalHeight:document.documentElement. clientHeight,
            loginForm:{
                phone:'',
                password:'',
                checkCode:''
            }
        }
    },
    mounted(){
        var normalHeight=sessionStorage.getItem('normalHeight');

        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        //重置密码
        resetPassword(){
            var URL=this.IP.IP+'/user/resetPassword';
            console.log(URL);
            console.log(this.loginForm);
            this.showTime=true;
            this.count=60;
            let clock = window.setInterval(() => {
                this.count--
                if (this.count < 0) {     //当倒计时小于0时清除定时器
                    window.clearInterval(clock);
                    this.showTime=false;
                    this.count = 60;
                }
            },1000)
            this.$ajax({
                method:'post',
                url:URL,
                data:this.loginForm
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                    Toast(response.data.data);
                    this.$router.push({
                        path:'/login'
                    })
                }else{
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }
    }
}
</script>
<style>
.el-header,el-main,el-footer,el-aside{
  padding:0px;
  margin: 0px;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.forgetInput .el-input__inner {
    font-size: 1.125em;
    border: none;
    border-bottom: 1px solid;
    border-color: #F0F0F0;
    background-color: rgba(255, 255, 255, 0);
    color: #707070;
    border-radius: 0px;
}
.btn{
    line-height: 0.75em;
    width: 100%;
    background-color: #53cdf5;
    border-style: none;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
}
.btnWords{
    font-size: 1.125em;
    color: #ffffff;
}
#inputHeight{
    height: 200px;
}
@media screen and (max-height: 600px){
  #inputHeight{
      height: 160px;
  }

}
</style>
